<template>
  <div class="toolbar colorMain">
    <div class="mt-10 mb-10">展示数据</div>
    <div>
      <el-form :inline="true" size="small">
        <el-select v-model="target_event_id" placeholder="请选择" size="small" @change="getData">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/>
        </el-select>
        <el-form-item label="渠道" ><channel v-model="chn_filter_list"/></el-form-item>
      </el-form>
    </div>
    <div class="mb-10 mt-10">{{ targetObj[target_event_id] }}走势</div>
    <ve-line :data="chartDataPay" />
    <ve-histogram :data="chartData"/>
  </div>
</template>

<script>
import { getGeneralAnalysis } from '@/api/table'
import mixins from '@/model/mixins'

export default {
  name: 'Overview',
  mixins: [mixins],
  data() {
    return {
      target_event_id: 'recharge',
      new_recharge: null,
      new_recharge_user: null,
      chn_filter_list: [],
      options: [{ label: '充值金额', value: 'recharge' },
        { label: '提现金额', value: 'withdraw' },
        { label: '流水金额', value: 'bet' },
        { label: '营收金额', value: 'profit' },
        { label: '充值人次', value: 'recharge_user' },
        { label: '注册人数', value: 'register' },
        { label: '绑定人数', value: 'bind' },
        { label: '活跃人次', value: 'active' },
        { label: '新付费账号', value: 'new_recharge_user' },
        { label: '新付费金额', value: 'new_recharge' },
      ],
      targetObj: {
        recharge: '充值金额',
        withdraw: '提现金额',
        bet: '流水金额',
        profit: '营收金额',
        recharge_user: '充值人次',
        register: '注册人数',
        bind: '绑定人数',
        active: '活跃人次',
        new_recharge_user: '新付费账号',
        new_recharge: '新付费金额'
      },
      dateDay: new Array(24).fill(7).map((item, index) => `${index}`),
      columns: ['时间', '今日充值金额', '昨日充值金额', '最近三天充值金额', '最近七日充值金额'],
      chartDataPay: {
        columns: [],
        rows: []
      },
      chartData: {
        columns: [],
        rows: []
      }
    }
  },
  watch: {
    chn_filter_list() {
      this.getData()
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      this.$loading({ lock: true, text: 'Loading', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.15)' })
      getGeneralAnalysis({ target_event_id: this.target_event_id,chn_filter_list: `[${Array.from(this.chn_filter_list, x => '"' + x.toString() + '"').join(',')}]` }).then(res => {
        const data = res.data.graph_data
        this.chartDataPay.columns = this.columns.map(item => {
          return item.replace('充值金额', this.targetObj[this.target_event_id])
        })
        this.chartDataPay.rows = this.dateDay.map((item, index) => {
          return {
            '时间': item,
            [this.chartDataPay.columns[1]]: data.today[index],
            [this.chartDataPay.columns[2]]: data.yesterday[index],
            [this.chartDataPay.columns[3]]: data.last_3[index],
            [this.chartDataPay.columns[4]]: data.last_week[index]
          }
        })
        console.log(this.chartDataPay)
        this.chartData.columns = this.chartDataPay.columns
        this.chartData.rows = this.dateDay.map((item, index) => {
          return {
            '时间': item,
            [this.chartDataPay.columns[1]]: data.today[index] - (data.today[index - 1] || 0),
            [this.chartDataPay.columns[2]]: data.yesterday[index] - (data.yesterday[index - 1] || 0),
            [this.chartDataPay.columns[3]]: data.last_3[index] - (data.last_3[index - 1] || 0),
            [this.chartDataPay.columns[4]]: data.last_week[index] - (data.last_week[index - 1] || 0)
          }
        })
        console.log(this.chartData.rows)
      }, err => {
        this.$message({ type: 'error', message: err.response.data.msg })
      })
    }
  }
}
</script>
